<template>
  <view>
    <view class="suborder">
      <!-- <view class="suborder-address">河南省洛阳市洛龙区国宝大厦2204河南省洛阳市洛龙区国宝大厦2204河南省洛阳市洛龙区国宝大厦2204</view> -->
      <addressfootbar
        v-if="address && mch_list[0].goods_list[0].product_type == 0"
        :address="address"
      ></addressfootbar>
      <view class="suborder-price">
        <view> <view class="price">￥</view>{{ pay_price }} </view>
        <view @click="submitOrder">{{ $t("submit.submit") }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import addressfootbar from "./addressfootbar.vue";

export default {
  components: {
    addressfootbar,
  },
  data() {
    return {};
  },
  props: {
    pay_price: {
      type: [Number,String],
      default: 0,
    },
    address: {
      type: Object,
      default: function () {
        return {};
      },
    },
    mch_list: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    submitOrder() {
      this.$emit("submitOrder");
    },
  },
};
</script>

<style lang="scss" scoped>
view {
  font-size: 26rpx;
}

.suborder {
  position: fixed;
  z-index: 1;
  bottom: 0rpx;
  left: 0rpx;
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;

  .suborder-address {
    height: 72rpx;
    line-height: 72rpx;
    padding: 0rpx 30rpx;
    background-color: #fbf8d9;
    color: #de6a1c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .suborder-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 99rpx;
    padding: 0rpx 30rpx;

    > view:first-child {
      display: flex;
      align-items: flex-end;

      .price {
        margin-bottom: 4rpx;
        font-size: 34rpx;
        color: #f2270c;
        font-weight: bold;
      }

      font-size: 48rpx;
      color: #f2270c;
      font-weight: bold;
    }

    > view:last-child {
      width: 226rpx;
      height: 76rpx;
      text-align: center;
      line-height: 76rpx;
      border-radius: 38rpx;
      color: #ffffff;
      font-weight: bold;
      background: linear-gradient(90deg, #ff4e18, #f32524);
    }
  }
}
</style>
